<template>
  <el-menu class="navbar" mode="horizontal">

    <!--<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>-->
    <!--<breadcrumb></breadcrumb>-->
    <img :src="wdrlogo1" style=" vertical-align: middle;padding-left: 20px;"/>
    <div class="avatar-container">
      <!--<div class="left-containner">-->
        <!--<div class="nav">-->
          <!--<ul>-->
            <!--<li>-->
              <!--&lt;!&ndash;<screenfull class="screenfull right-menu-item"></screenfull>&ndash;&gt;-->
            <!--</li>-->
            <!--<li>费用</li>-->
            <!--<li>工单</li>-->
            <!--<li>帮助</li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->

      <div class="right-containner">
        <div class="notice" @click="routerJump">
          <el-badge :value="this.message" :max="99" class="item">
            <span><img :src="imponenthover" style="vertical-align: middle"/> 必要信息 </span>
          </el-badge>
        </div>
      </div>
      <div class="right-containner1">
        <div class="notice">
          <div class="topTimeShow">{{this.topTime}}</div>
        </div>
      </div>

    </div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper" v-bind:style="{ backgroundColor: activeColor, width: 60 + 'px', Left: 20+ 'px' }" @click="openTop">
        <img class="user-avatar" :src="user">
        <!--<div v-if="$store.getters.user.user_info" class="username">{{$store.getters.user.user_info.account}}</div>-->
        <div v-if="$store.getters.user.user_info" class="username"></div>
        <!--<i class="el-icon-caret-bottom"></i>-->
      </div>

      <el-dropdown-menu class="user-dropdown" slot="dropdown" style="padding: 0" :visible-arrow="false">

        <el-dropdown-item disabled>
          <div class="username">
            <span style="font-size: 16px">
              {{$store.getters.user.user_info.account}}
            </span>
            &nbsp;<br>
            <span style="font-size: 12px; color: #666">欢迎您</span>
          </div>
        </el-dropdown-item>
        <div @mouseover="showList1"  @mouseleave="leaves1" >
          <el-dropdown-item style="background-color: #fff">
            <router-link to="/basicInfo/updatepwd">
              <img class="photo" :src="seen1" alt="修改密码" style="vertical-align: middle; padding-right: 10px"/>
              修改密码&nbsp;
            </router-link>
          </el-dropdown-item>
        </div>
        <!--<el-dropdown-item><img class="photo1" :src="anquanshezhi" alt="安全设置"-->
                               <!--style="vertical-align: middle; padding-right: 10px"/>安全设置-->
        <!--</el-dropdown-item>-->
        <!--<el-dropdown-item><img class="photo1" :src="fangwen" alt="访问管理"-->
                               <!--style="vertical-align: middle; padding-right: 10px"/>访问管理-->
        <!--</el-dropdown-item>-->
        <!--<div @mouseover="showList1"  @mouseleave="leaves2" @click="logout">-->
          <!--<el-dropdown-item   divided  style="background-color: #fff; ">-->
            <!--<img class="photo1" :src="seen"  alt="退出登录" style="vertical-align: middle; padding-right: 10px"/>-->
            <!--账号信息-->
          <!--</el-dropdown-item>-->
        <!--</div>-->
        <div @mouseover="showList"  @mouseleave="leaves" @click="logout">
          <el-dropdown-item   divided  style="background-color: #fff; ">
            <img class="photo1" :src="seen"  alt="退出登录" style="vertical-align: middle; padding-right: 10px"/>
            退出登录
          </el-dropdown-item>
        </div>

      </el-dropdown-menu>
    </el-dropdown>

  </el-menu>
</template>
<script>
  import { mapGetters } from 'vuex'
  import axios from 'axios'
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
  import Screenfull from '@/components/Screenfull'
  import notice from '@/assets/home/notice.png'
  import search from '@/assets/home/search.png'
  import imponenthover from '@/assets/homeOverview/imponenthover.png'
  import user from '@/assets/home/homeUser.png'
  import usernormal from '@/assets/home/usernormal.png'
  import logout1 from '@/assets/home/logout.png'
  import logoutpress from '@/assets/home/logoutpress.png'
  import anquanshezhi from '@/assets/home/anquanshezhi.png'
  import fangwen from '@/assets/home/fangwen.png'
  import wdrlogo1 from '@/assets/home/wdrlogo1.png'
//  import userinfo_normal from '@/assets/home/userinfo_normal.png'
  import userinfo_normal from '@/assets/home/userinfo_normal.png'
  import user_hover from '@/assets/home/user_hover.png'
  export default {
    data() {
      return {
        notice,
        search,
        user,
        usernormal,
        logout1,
        anquanshezhi,
        fangwen,
        wdrlogo1,
        imponenthover,
        logoutpress,
        userinfo_normal,
        user_hover,
        message: '20',
        topTime: '',
        topDate: '',
        intervalObj: '',
        seen: this.logout1,
        activeColor: '',
        // 获取必要消息条数
        submitMessage: {
          access_token: localStorage.getItem('access_token'),
          type: 'remind_total'
        }
      }
    },
    components: {
      Breadcrumb,
      Hamburger,
      Screenfull

    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar'
      ])
    },
    methods: {
      openTop() {
        this.activeColor = '#D3E9F4'
      },
      showList() {
        this.seen = this.logoutpress
      },
      leaves() {
        this.seen = this.logout1
      },
      showList1() {
        this.seen1 = this.user_hover
      },
      leaves1() {
        this.seen1 = this.userinfo_normal
      },
      A: function() {
        this.intervalObj = setInterval(() => {
          this.drawLine()
          this.getMessage()
        }, 10000)
      },
      getMessage() {
        axios.post('/remind', this.submitMessage, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.message = res.data.data.needful_total
          console.log(res)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      toggleSideBar() {
        this.$store.dispatch('ToggleSideBar')
      },
      logout() {
        if (this.$store.getters.access_token) {
          this.$store.dispatch('LogOut')
          // this.$http.post(process.env.SERVER_URL_4A + '/logout'
          //   , {
          //     access_token: this.$store.getters.access_token
          //   }, {
          //     isJSON: true
          //   }).then((response) => {
          //   console.log('process.env.NODE_ENV', process.env.SERVER_URL_4A_VUE)
          //   window.location.href = process.env.SERVER_URL_4A_VUE + '?callbackUrl=' + encodeURIComponent(window.location.href)
          // }).catch((error) => {
          //   window.location.href = process.env.SERVER_URL_4A_VUE + '?callbackUrl=' + encodeURIComponent(window.location.href)
          //   console.log(error)
          // })
        }

        // this.$store.dispatch('LogOut').then(() => {
        //   // location.reload() // 为了重新实例化vue-router对象 避免bug
        //   window.location.href = 'http://localhost:9529/'
        // })
      },
      A: function() {
        this.intervalObj = setInterval(() => {
          this.drawLine()
        }, 10000)
      },
      drawLine() {
        var weekShow = ''
        if (new Date().getDay() === 1) {
          weekShow = '一'
        } else if (new Date().getDay() === 2) {
          weekShow = '二'
        } else if (new Date().getDay() === 3) {
          weekShow = '三'
        } else if (new Date().getDay() === 4) {
          weekShow = '四'
        } else if (new Date().getDay() === 5) {
          weekShow = '五'
        } else if (new Date().getDay() === 6) {
          weekShow = '六'
        } else if (new Date().getDay() === 7) {
          weekShow = '七'
        }
        var hours = new Date().getHours()
        var minutes = new Date().getMinutes()
        if (hours < 10) {
          hours = '0' + new Date().getHours()
        }
        if (minutes < 10) {
          minutes = '0' + new Date().getMinutes()
        }
        var month = new Date().getMonth() + 1
        var day = new Date().getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + new Date().getDate()
        }
        this.topTime = (new Date().getFullYear() + '-' + month + '-' + day + ' ' + '周' + weekShow)
        this.topDate = (hours + ':' + minutes)
      },
      routerJump() {
        this.$router.push({
          path: '/message'
        })
      }
    },
    mounted() {
      this.A()
      this.drawLine()
      this.getMessage()
      this.showList()
      this.leaves()
      this.showList1()
      this.leaves1()
    },
    destroyed: function() {
      clearInterval(this.intervalObj)
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    width: 100%;
    height: 60px;
    line-height: 50px;
    border-radius: 0px !important;
    background: -webkit-linear-gradient(to right, #0072f3,#00a9fc);
    background: -o-linear-gradient(to right, #0072f3,#00a9fc);
    background: -moz-linear-gradient(to right, #0072f3,#00a9fc);
    background: linear-gradient(to right, #0072f3,#00a9fc);
    position: fixed;
    margin-left: -180px;
    top: 0;
    bottom: 0;
    left: 180px;
    z-index: 1;
    overflow: hidden;
    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }
    .screenfull {
      position: absolute;
      right: 570px;
      top: 16px;
      color: red;
    }
    .avatar-container {
      height: 60px;
      display: inline-block;
      position: absolute;
      right: 30px;

      .avatar-wrapper:hover {
        background-color:rgba(245,245,245,0.8);
      }
      .avatar-wrapper {
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: relative;
        line-height: 60px;
        text-align: center;
        padding-top: 7px;
        margin-right: -20px;
        .username {
          display: inline-block;
          vertical-align: middle;
          float: right;
          font-size: 14px;
          color: #fff;
          margin-left: 10px;
          margin-top: -5px;
        }
        .user-avatar {
          width: 30px;
          height: 30px;
          border-radius: 30px;
        }
        .el-icon-caret-bottom {
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
      .left-containner {
        width: 310px;
        height: 50px;
        line-height: 50px;
        float: left;
        .nav {
          float: left;
          color: #000;
          width: 160px;
          height: 50px;
          margin-left: 40px;

        }
        .nav ul {
          margin: 4px 0;
          Width: 160px;
          height: 40px;
          padding: 0;
          list-style: none;
          cursor: pointer;

        }
        .nav ul li {
          float: left;
          text-align: center;
          width: 50px;
          font: 14px/2.5 "microsoft yahei";
          border-right: 1px solid #000000;
        }
      }
      .right-containner {
        width: 135px;
        height: 60px;
        right: 150px;
        display: inline-block;
        position: absolute;
        padding-right: 46px;
        .search {
          width: 180px;
          background-color: #424E60;
          height: 27px;
          line-height: 30px;
          margin-top: 10px;
          float: left;
          cursor: pointer;
          input {
            background-color: #424E60;
            border: 0;
            border-right: 1px solid #556072;
            color: white;
            width: 150px;
            padding-left: 10px;
            outline: none;
            font-size: 14px;
          }
        }
        .notice {
          float: right;
          .item {
            cursor: pointer;
            margin-top: 0px;
            color: #F43B42;
            span {
              font-size: 14px;
            }
          }

          /deep/ .el-badge__content {
            background-color: #F43B42;
            border-radius: 3px;
            color: #fff;
            display: inline-block;
            font-size: 12px;
            height: 14px;
            line-height: 14px;
            padding: 0 6px;
            text-align: center;
            border: 1px solid #fff;
          }
          /deep/ .el-badge__content.is-fixed {
            position: absolute;
            top: 11px;
            right: -1px;
          }
        }
      }
      .right-containner:hover{
        /*background-color: #f5f5f5;*/
        background-color:rgba(245,245,245,0.5);
      }
      .right-containner1 {
        width: 100px;
        height: 50px;
        right: 50px;
        display: inline-block;
        position: absolute;
        .topTimeShow {
          color: #fff;
          font-size: 12px;
          margin-top: 20px;
          margin-left: 30px;
          width: 100px;
          line-height: 15px;
          text-align: center;
          float: right;
        }
      }
    }
  }

  /deep/ .el-badge__content.is-fixed {
    position: absolute;
    top: 0;
    right: 10px;
    -webkit-transform: translateY(-60%) translateX(100%);
    transform: translateY(60%) translateX(100%);
  }

  /deep/ .el-badge__content {
    background-color: #F43B42;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    border: 1px solid #fff;
  }

  /deep/ .el-dropdown-menu__item--divided:before {
    content: '';
    height: 0px;
    display: block;
    margin: 0 -20px;
    background-color: #fff;
  }



  /deep/ .el-dropdown-menu__item--divided {
    position: relative;
    margin-top: 6px;
    border-top: 1px solid #E6E6E6;
  }

  /deep/ .el-dropdown-menu__item {
    list-style: none;
    line-height: 36px;
    padding: 0 34px;
    margin: 0;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    outline: none;
  }
  /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after {

    border-color: #1f2d3d;
    /* border-style: solid; */
  }
    .el-dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0px;
    margin: -1px 0;
    background-color: rgba(196, 230, 246, 0.5);
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    color: #000;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  }

  /deep/ .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    background-color: #E6E6E6;
    color: #0072f3;
  }

  /deep/ .el-menu--horizontal {
    border-right: none;
    border-bottom: solid 1px red;
  }
  .username{
    width: 100%;
    height: 43px;
    /*background-color: #f5f5f5;*/
    line-height: 20px;
    color: #333;
    font-size: 14px;
  }
</style>

